<template>
    <el-container class="glass p-2">
        <el-header height="30px" class="flex-wrap">
            <el-page-header @back="goBack">
                <template #content>
                    <span class="text-large font-600 me-3">我的导航</span>
                    <el-link type="warning" @click="dialogInfo.visible = !dialogInfo.visible">编辑导航数据</el-link>
                </template>
            </el-page-header>
            <div class="position-absolute top-0 end-0 px-2">
                <ThemeSwitch />
            </div>
        </el-header>
        <el-container class=" rounded p-2" style="height:calc(100vh - 44px)">
            <el-aside width="130px">
                <el-menu :default-active="activeIndex" @select="onChangeMenu" class="rounded">
                    <el-menu-item :index="item.category" v-for="(item, idx) of myData" :key="idx">
                        {{ item.category }}
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-scrollbar :always="true" :native="true" class="rounded">
                <el-main class="pt-0">
                    <el-card class="mb-3" v-for="(item, idx) of categoryData" :key="idx">
                        <template #header><strong>{{ item.text }}</strong></template>
                        <div class="flex flex-wrap">
                            <el-link class="me-4 mb-3" :href="item2.link" target="_blank" v-for="(item2, idx2) of item.data"
                                :key="idx2">
                                {{ item2.text }}
                            </el-link>
                        </div>
                    </el-card>
                </el-main>
            </el-scrollbar>
        </el-container>
    </el-container>
    <el-drawer v-model="dialogInfo.visible" :title="dialogInfo.title" size="90%" class="p-0">
        <el-text>
            数据格式必须是有效的 JSON 格式。可以通过 Visual Code 等软件或者在线美化工具
            <el-link href="https://www.bejson.com/" target="_blank">[BeJSON]</el-link>、
            <el-link href="https://www.sojson.com/" target="_blank">[SoJSON]</el-link>
            等修改数据。
        </el-text>
        <el-input v-model="dialogInfo.content" :rows="38" type="textarea" placeholder="JSON 格式的数据源码" />
        <template #footer>
            <div style="flex: auto">
                <el-button @click="onCancel()">取消</el-button>
                <el-button type="primary" @click="onSave()">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import ThemeSwitch from '@/components/theme-switch/ThemeSwitch.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import sampleData from '@/mock/_mysample';

const myData = ref([]);
const cacheName = "mydata";

const dialogInfo = ref({
    visible: false,
    title: '编辑“我的导航”数据内容',
    content: '',
})

const categoryData = ref([]);
const activeIndex = ref('');

const onChangeMenu = (name) => {
    activeIndex.value = name;
    categoryData.value = myData.value.filter(v => v.category == name)[0].data;
}

const onCancel = () => {
    dialogInfo.value.visible = false;
    dialogInfo.value.content = JSON.stringify(myData.value);
}

const onSave = () => {
    dialogInfo.value.visible = false;
    localStorage.setItem(cacheName, dialogInfo.value.content);
    loadData();
}

const loadData = () => {
    let text = localStorage.getItem(cacheName), status = false;
    if (text) {
        try {
            myData.value = JSON.parse(text);
            status = true;
        } catch (error) {
            console.log(error);
        }
    }
    if (!status) {
        myData.value = sampleData;
    }
    dialogInfo.value.content = JSON.stringify(myData.value);
    categoryData.value = myData.value[0].data;
    activeIndex.value = myData.value[0].category;
}

const goBack = () => {
    router.push('/');
}

loadData();
</script>

<style>
.el-menu-item {
    height: 40px;
}

.el-card__header {
    padding: 15px;
}

.el-card__body {
    padding: 15px;
    padding-bottom: 0;
}

.el-drawer__header {
    margin-bottom: 0 !important;
}
</style>